ActionSheetに代わるスタンダード? iOSアプリのプルダウンメニューについて #WWDC20

はじめに

CX事業本部の中安です。まいどです。

WWDC2020を経て、Appleのヒューマンインタフェースガイドラインにも新トピックが追加されていますね。

その中でも「Pull-Down Menus」という項目が増えているようです。

今回はこちらについてブログにしたためてみようかなと思います。

Pull-Down Menus

まずはサマリーとしてはこう説明されています。

In iOS 14 and later, a button can display a pull-down menu that lists items or actions from which people can choose. You can use a pull-down menu — or simply menu — to offer items that are directly related to the button's action or to provide a list of actions that are useful in the current context.

iOS14以降では、ボタンにプルダウンメニューを表示して、選択可能なアイテムやアクションのリストを表示することが可能です。 ボタンのアクションに直接関連するアイテムを提供したり、現在のコンテキストで有用なアクションのリストを提供したりするため、プルダウンメニュー(または単にメニュー)を使用することができます。

※AppleのHuman-Interface-Guidelinesより

このプルダウンメニューの利点として

• メニューが表示されるボタンのすぐ近くにメニューが開くので、メニューの項目と実行しているアクションの関係をすぐに理解できる。
• メニューには、アクションのリストに加えてユーザーが主要なアクションに影響を与えるために使用できる選択を提供できる。
• メニューはすばやくアニメーション表示され、表示されたときに画面を暗くすることがないため、移行と全体的なエクスペリエンスの両方に軽量感がある。

と謳われています。

長らくに渡ってiOSのアプリはアクションシートなどがこういったUIでのスタンダードであったと思いますが、もしかしたらプルダウンに変化をしていくかもしれませんね。

利点を活かすための留意点

ヒューマンインタフェースガイドラインに掲載されている内容なので、実装の話というよりはデザイナーさんが考える要素の配置についての留意点が示されています。

抜粋・意訳がありますので、詳しくはガイドラインを直接お読みください。

アクションをすべて置かない

メニューを置くときにアプリの提供する機能をどんどん入れていくことは、逆に混乱を期してしまうのではないでしょうか(というドキュメントを読んでの解釈だったのですが、間違ってたらすいません)。

重要な機能はメインUIに配置し、メニューで補足するというスタンスで配置するべきなのかなと思います。

ドキュメントの例示では「追加ボタンを押した時の挙動」が挙げられていますが、そのアクションからの補足メニューとして「テキストを追加する」「画像を追加する」といったアイテムを出すのが好ましいのではないでしょうか。

「もっと」ボタンを上手く使う

A More button integrates well with most interfaces, and people generally understand that it provides access to additional functionality.

「もっと」ボタンは、ほとんどのインターフェイスとうまく統合されていて、追加機能へのアクセスを提供していることが一般的に理解されています。

メニューも項目が多くなると、インターフェイス的には良くないでしょう。

主たるサブ機能をまずは最初のメニューに配置し、普段積極的に使わないであろう機能は「もっと」から使ってもらうという検討が必要でしょう。

アプリをデザインするときには情報と機能の重さを測っておくことが大事なのではないでしょうか。

ここでいう「もっとボタン」とは、

この形のアイコンですね。

このアイコンは色んなアプリで浸透しているはずなので、これを見てユーザは「コレなんの意味?」とはならないはずなので使っていきましょうということですね。

セバレータでグループ化する

メニューにカテゴリがある場合は、セパレータで互いのメニューと混合されないように分離しましょう。

最終確認はアクションシートを使う

ドキュメントでは破壊的行為と書かれていますが、要は「データを削除する」などのアクションをするメニューである場合は、ユーザの誤操作を防ぐために以下のようなことをしましょう。

• メニューの文字は赤い文字にする。
• 最終確認をするために従来のアクションシートを表示する。(別場所に表示されるので連続してタップはされにくくなる)

「赤い文字」といっても#FF0000な赤ではなく、アクセシビリティも考慮してアクションシートやアラートに使用している文字色が個人的にはよいかと思います。

アイコンをつける

メニューのアイテムにアイコンを付けることができますが、できる限り積極的につけていきましょうというお話です。

文言だけでは分かりにくいものもアイコン(グリフ)がつくことで機能の意味をユーザに更に分かるものにしてくれますね。

意味を含む場合はメニューにタイトルをつける

メニューのすべてにタイトルを含めずとも、これは一体何のメニューなのだろうという動線の場合などはタイトルをつけたほうがいいでしょう。

最後に

Pull-Down Menusの狙いはなんだろうなと想像してみたところの所感を書くのですが、 iOS14の発表ではいくつか大幅なUIの変更があったと思います。その中でも

• 電話が来た時
• Siriを使う時

は、今まではiPhoneの全画面を使ったUIになっていました。

おなじく、これまでの選択肢の表示方法だったアクションシートも全画面を喰ってしまうUIの一種だったと思います。

電話やSiriで見られる「全画面を喰ってしまうUIの排除」をここにも適用したい狙いがあるのではないでしょうか。 表示されたときに画面を暗くすることがないため、移行と全体的なエクスペリエンスの両方に軽量感という文言からも伺えるのかなぁと思いました。

新しいiOSではApple標準アプリもUIに大きな変更が加わると思いますが、このプルダウンメニューの使い方とヒューマンインタフェースガイドラインと照らし合わせて、Appleの目指そうとしているUIデザインを見ていくといいかもと思います。

ではまた。